<template>
  <div class="home">
    <app-header></app-header>
    <div class="scoll" @scroll="scroll">
      <app-tab @tab="cutTab"></app-tab>
      <app-list :appList="showList"></app-list>
    </div>
  </div>
  <i class="iconfont icon-huidaodingbu" v-show="showback" @click="goTop"></i>
</template>

<script>
// @ is an alias to /src
import appHeader from "../components/appHeader.vue";
import AppTab from "../components/appTab.vue";
import api from "../api/index";
import { reactive, toRefs } from "vue";
import AppList from "../components/appList.vue";
import { useStore } from "vuex";
export default {
  name: "Home",
  components: {
    appHeader,
    AppTab,
    AppList,
  },
  setup(props) {
    const store = useStore();
    const data = reactive({
      allList: [], // 请求所有的数据
      showList: [], // 展示的数据
      showback: false, // 是否回到顶部的火箭
    });
    api.get(`/topics`).then((res) => {
      data.allList = res.data.map((item) => {
        // 添加字段
        return {
          ...item,
          ...{ isShouchang: false },
        };
      });
      data.showList = data.allList;
      cutTab(store.state.checkSty);
    });

    const cutTab = (val) => {
      if (val == "all") {
        // 代表显示全部的
        data.showList = data.allList;
      } else {
        data.showList = data.allList.filter((item) => item.tab == val);
      }
    };
    let dom = null; // 定义全局的变量，记录滚动盒子dom元素
    let num = 0; // 滚动盒子的高度
    const scroll = (e) => {
      // e 是事件对象  e.target 滚动盒子
      // e.target.scrollTop 滚动条距离顶部的距离
      num = e.target.scrollTop;
      dom = e.target;
      if (num > 400) {
        data.showback = true;
      } else {
        data.showback = false;
      }
    };

    const goTop = () => {
      // 回到顶部的函数
      let time = setInterval(() => {
        if (num <= 0) {
          clearInterval(time);
        } else {
          num = num - 50;
          dom.scrollTop = num;
        }
      }, 10);
    };
    return {
      ...toRefs(data),
      cutTab,
      scroll,
      goTop,
    };
  },
};
</script>
<style lang="scss" scoped>
.home {
  height: 100%;
  .scoll {
    height: calc(100% - 60px);
    overflow: auto;
  }
}
.iconfont {
  position: fixed;
  bottom: 100px;
  right: 10px;
  z-index: 99;
  color: red;
  font-size: 50px;
}
</style>
